<template>
  <div id="orderDetail">
    <Header :showBack="true"></Header>
    <div class="rootMain">
      <!-- active 1 提币详情 提币又分提取 amountType 1 CNN可提 / 2 vc可提  3 vc理财 -->
      <div v-if="active ==1">
        <p v-if="data.amountType==1">{{$t('m.fundName')}}：CNN 提现</p>
        <p v-else-if="data.amountType==2">{{$t('m.fundName')}}：VC 提币</p>
        <p v-else>{{$t('m.fundName')}}：VC 理财</p>
        <p>{{$t('m.withdrawalAmount')}}：{{data.amount}}</p>
        <p>{{$t('m.processingFee')}}：{{data.commission || 3}}</p>
        <!-- 提币地址 -->
        <p>{{$t('m.coinAddress')}}：{{data.walletAddress}}</p>
        <p>{{$t('m.startingTime')}}：{{data.withdrawTime}}</p>
        <p>{{$t('m.coinOrderNumber')}}：{{data.withdrawId}}</p>
        <!-- 订单状态 -->
        <p v-if="data.withdrawStatus==1">{{$t('m.orderStatus')}}：{{$t('m.successT')}}</p>
        <p v-else-if="data.withdrawStatus==2">{{$t('m.orderStatus')}}：{{$t('m.errorT')}}</p>
        <p v-else>{{$t('m.orderStatus')}}：{{$t('m.processing')}}</p>
        <!-- 订单成功 时间 -->
        <p v-if="data.withdrawStatus == 1">{{$t('m.paymentTime')}}：{{data.remitTime}}</p>
        <p v-if="data.withdrawStatus == 1">{{$t('m.arrivalTime')}}：{{data.completedTime}}</p>
      </div>
      <!-- active 2 划转详情 -->
      <div v-else>
        <p v-if="data.amountType==1">{{$t('m.fundName')}}：GCC</p>
        <p v-else>{{$t('m.fundName')}}：USDT</p>
        <p>{{$t('m.transferAccount')}}：{{val}}</p>
        <p>{{$t('m.transferAmount')}}：{{data.txnAmount}}</p>
        <p>{{$t('m.arrivalAmount')}}：{{data.txnRatioAmount}}</p>
        <p>{{$t('m.processingFee')}}：{{data.ratioAmount}}</p>
        <p v-if="active==2">{{$t('m.transferTime')}}：{{data.txnTime}}</p>
        <p v-else>{{$t('m.arrivalTime')}}：{{data.txnTime}}</p>
      </div>
    </div>
  </div>
</template>
<script>
import Services from "@/service/index.js";
import Header from "@/components/header";
import { mapMutations } from "vuex";
import { Toast } from "vant";
export default {
  data() {
    return {
      loginToken: "",
      active: "",
      data: {},
      val: ""
    };
  },
  created() {
    this.changeTitle(this.$t("m.orderDetails"));
    this.loginToken = localStorage.getItem("token")
      ? localStorage.getItem("token")
      : "";
    this.active = this.$route.query.active;
    if (this.$route.query.active == 1) {
      this.data = JSON.parse(sessionStorage.getItem("detailData"));
    } else if (this.$route.query.active == 2) {
      Services.wdyTransferPoints({
        token: this.loginToken,
        id: this.$route.query.id,
        lang: localStorage.getItem("language")
      }).then(res => {
        if (res.code == "0000") {
          //        console.log(res);
          this.data = res.wdyTransferPoints;
          let valTemp = res.wdyTransferPoints.coverTransactionUserName; //转出
          //        console.log(valTemp);
          this.val = valTemp.replace(valTemp.substr(3, 4), "****");
        }
      });
    } else {
      Services.wdyTransferPointsCover({
        token: this.loginToken,
        id: this.$route.query.id,
        lang: localStorage.getItem("language")
      }).then(res => {
        if (res.code == "0000") {
          //        console.log(res);
          this.data = res.wdyTransferPoints;
        }
      });
    }
  },
  components: {
    Header
  },
  computed: {},
  methods: {
    ...mapMutations(["changeTitle"])
  }
};
</script>
<style lang="scss" scoped type="text/scss">
#orderDetail {
  .rootMain {
    top: 0.88rem;
    height: calc(100% - 0.88rem);
    > div {
      padding: 0.5rem 0.3rem;
      p {
        margin: 0.2rem 0;
      }
    }
  }
}
</style>